status/network: Decouple NMVpnSection from NMConnectionSection

The NMConnectionSection class is used - surprise - to manage a
list of related connections. And while the presentation of VPN
items is slightly different from connections associated with
devices (switches vs. ornaments), it makes perfect sense for
the VPN section to share the nitty-gritty with the base class.

But…

Right now it is perfectly fine for NMConnectionSection to be
used both as a child element in a device section, and as toplevel
item of the VPN section. Any nesting of sections is entirely
transparent to the user, and all connection sections appear as
submenu items in the toplevel menu.

That won't work for quick settings.

There's no PopoverMenuSection that allows invisible grouping, so
adding items dynamically would either need to happen at the end,
or require some tricky cross-component code to impose a particular
order.

And last but not least, quick toggles are very much unsuited for
a potentially large number of items. The whole point is to provide
quick direct access to system features, not to compete with menus
over the number of items they can hold.

That is, we need to get from the current state where each device
appears as a toplevel item, to a state where we have one quick
toggle for each device type plus one for VPN.

The decoupled VPN section still behaves largely as it did as a
subclass, with the notable difference that it no longer uses
a submenu item, so all VPN connections now appear at the toplevel.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index 890a3e5bea26dd8d1760fe6202acabec879a543e..5c3cd7bcbb8c47e239781e4b23b25f56276fdb3b 100644 (file)
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -163,9 +163,6 @@ const NMConnectionItem = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             ''),
     },
-    Signals: {
-        'activation-failed': {},
-    },
 }, class NMConnectionItem extends PopupMenu.PopupBaseMenuItem {
     constructor(section, connection) {
         super();
@@ -393,7 +390,6 @@ var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter
             return;
 
         item.connect('notify::icon-name', () => this._iconChanged());
-        item.connect('activation-failed', () => this.emit('activation-failed'));
         item.connect('notify::name', this._sync.bind(this));
 
         const pos = this._itemSorter.upsert(item);
@@ -1502,8 +1498,11 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
     }
 };
 
-const NMVpnConnectionItem = GObject.registerClass(
-class NMVpnConnectionItem extends NMConnectionItem {
+const NMVpnConnectionItem = GObject.registerClass({
+    Signals: {
+        'activation-failed': {},
+    },
+}, class NMVpnConnectionItem extends NMConnectionItem {
     constructor(section, connection) {
         super(section, connection);
 
@@ -1561,19 +1560,27 @@ class NMVpnConnectionItem extends NMConnectionItem {
     }
 });
 
-var NMVpnSection = class extends NMConnectionSection {
+var NMVpnSection = class extends PopupMenu.PopupMenuSection {
     constructor(client) {
-        super(client);
+        super();
+
+        this._client = client;
+
+        this._items = new Map();
+        this._itemSorter = new ItemSorter();
+
+        this._section = new PopupMenu.PopupMenuSection();
+        this.addMenuItem(this._section);
+
+        this.addSettingsAction(_('VPN Settings'),
+            'gnome-network-panel.desktop');
 
         this._client.connectObject(
-            'connection-added', (c, conn) => this.checkConnection(conn),
-            'connection-removed', (c, conn) => this.removeConnection(conn),
+            'connection-added', (c, conn) => this._addConnection(conn),
+            'connection-removed', (c, conn) => this._removeConnection(conn),
             'notify::active-connections', () => this._syncActiveConnections(),
             this);
 
-        this.item.menu.addSettingsAction(_('VPN Settings'),
-            'gnome-network-panel.desktop');
-
         this._loadInitialItems();
         this._sync();
     }
@@ -1581,7 +1588,7 @@ var NMVpnSection = class extends NMConnectionSection {
     _loadInitialItems() {
         const connections = this._client.get_connections();
         for (const conn of connections)
-            this.checkConnection(conn);
+            this._addConnection(conn);
 
         this._syncActiveConnections();
     }
@@ -1591,11 +1598,11 @@ var NMVpnSection = class extends NMConnectionSection {
             this._client.get_active_connections().filter(
                 c => this._shouldHandleConnection(c.connection));
 
-        for (const item of this._connectionItems.values())
+        for (const item of this._items.values())
             item.setActiveConnection(null);
 
         for (const a of activeConnections)
-            this._connectionItems.get(a.connection.get_uuid())?.setActiveConnection(a);
+            this._items.get(a.connection)?.setActiveConnection(a);
 
         this._sync();
     }
@@ -1616,45 +1623,61 @@ var NMVpnSection = class extends NMConnectionSection {
         return handledTypes.includes(setting.type);
     }
 
+    _onConnectionChanged(connection) {
+        const item = this._items.get(connection);
+        item.updateForConnection(connection);
+    }
+
+    _resortItem(item) {
+        const pos = this._itemSorter.upsert(item);
+        this._section.moveMenuItem(item, pos);
+    }
+
     _addConnection(connection) {
-        super._addConnection(connection);
+        if (this._items.has(connection))
+            return;
+
+        if (!this._shouldHandleConnection(connection))
+            return;
 
         connection.connectObject(
-            'changed', () => this.checkConnection(connection),
+            'changed', this._onConnectionChanged.bind(this),
             this);
-    }
 
-    _connectionValid(connection) {
-        return this._shouldHandleConnection(connection);
-    }
+        const item = new NMVpnConnectionItem(this, connection);
+        item.connectObject(
+            'activation-failed', () => this.emit('activation-failed'),
+            'notify::name', () => this._resortItem(item),
+            'destroy', () => this._removeConnection(connection),
+            this);
 
-    _sync() {
-        let nItems = this._connectionItems.size;
-        this.item.visible = nItems > 0;
+        this._items.set(connection, item);
+        const pos = this._itemSorter.upsert(item);
+        this._section.addMenuItem(item, pos);
 
-        super._sync();
+        this._sync();
     }
 
-    get category() {
-        return NMConnectionCategory.VPN;
-    }
+    _removeConnection(connection) {
+        const item = this._items.get(connection);
+        if (!item)
+            return;
 
-    _getDescription() {
-        return _("VPN");
-    }
+        this._itemSorter.delete(item);
+        this._items.delete(connection);
 
-    _getStatus() {
-        let values = this._connectionItems.values();
-        for (let item of values) {
-            if (item.is_active)
-                return item.name;
-        }
+        item.destroy();
+        this._sync();
+    }
 
-        return _("VPN Off");
+    _sync() {
+        const nItems = this._items.size;
+        for (const item of this._items.values())
+            item.radio_mode = nItems > 1;
     }
 
-    _getMenuIcon() {
-        return this.getIndicatorIcon() || 'network-vpn-disabled-symbolic';
+    get category() {
+        return NMConnectionCategory.VPN;
     }
 
     activateConnection(connection) {
@@ -1665,13 +1688,8 @@ var NMVpnSection = class extends NMConnectionSection {
         this._client.deactivate_connection(activeConnection, null);
     }
 
-    _makeConnectionItem(connection) {
-        return new NMVpnConnectionItem(this, connection);
-    }
-
     getIndicatorIcon() {
-        let items = this._connectionItems.values();
-        for (let item of items) {
+        for (const item of this._items.values()) {
             if (item.is_active)
                 return item.icon_name;
         }
@@ -1842,7 +1860,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._vpnSection = new NMVpnSection(this._client);
         this._vpnSection.connect('activation-failed', this._onActivationFailed.bind(this));
         this._vpnSection.connect('icon-changed', this._updateIcon.bind(this));
-        this.menu.addMenuItem(this._vpnSection.item);
+        this.menu.addMenuItem(this._vpnSection);
 
         this._readConnections();
         this._readDevices();